<template>
  <a-card>
    <a-form @submit="handleSubmit" :form="form" class="form">
      <a-row :gutter="[8]">
        <a-col :xl="4" :lg="6" :md="8" :sm="12">
          <a-form-item>
            <a-input placeholder="请输入产品条码" />
          </a-form-item>
        </a-col>
        <a-col :xl="4" :lg="6" :md="8" :sm="12">
          <a-form-item>
            <a-space>
              <a-button type="primary">查询</a-button>
              <a-button>重置</a-button>
            </a-space>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
    <a-descriptions title="产品基本信息">
      <a-descriptions-item label="产品名称">花键轴</a-descriptions-item>
      <a-descriptions-item label="批次号">P_20231010-00000</a-descriptions-item>
      <a-descriptions-item label="批次号">P_20231010-00000</a-descriptions-item>
      <a-descriptions-item label="工单号">P_20231010-00000</a-descriptions-item>
      <a-descriptions-item label="生产时间">2023-10-04 11:11:11</a-descriptions-item>
      <a-descriptions-item label="当前位置">已出库</a-descriptions-item>
    </a-descriptions>
    <a-tabs>
      <a-tab-pane key="相关人员" tab="相关人员">
        <vxe-table ref="xTable1" border stripe height="400"
          :checkbox-config="{ trigger: 'row', highlight: true, range: true }" :column-config="{ resizable: true }"
          :row-config="{ isHover: true }" :data="tableData"
          :custom-config="{ storage: true, checkMethod: checkColumnMethod }">
          <vxe-column type="checkbox" width="40"></vxe-column>
          <vxe-column type="seq" width="30"></vxe-column>
          <vxe-column field="员工" title="员工" sortable>
            <template #default="{ row }"><a href=#>{{ row.员工 ? row.员工 : "员工" }}</a></template>
          </vxe-column>
          <vxe-column field="工作中心" title="工作中心" sortable>
            <template #default="{ row }"><a href=#>{{ row.工作中心 ? row.工作中心 : "工作中心" }}</a></template>
          </vxe-column>
          <vxe-column field="工序" title="工序" sortable></vxe-column>
          <vxe-column field="日期" title="日期" sortable></vxe-column>
          <vxe-column field="班次" title="班次" sortable></vxe-column>
          <vxe-column field="上岗时间" title="上岗时间" sortable></vxe-column>
          <vxe-column field="离岗时间" title="离岗时间" sortable></vxe-column>
        </vxe-table>
        <vxe-pager border icon-prev-page="vxe-icon-arrow-left" icon-jump-prev="vxe-icon-arrow-double-left"
          icon-jump-next="vxe-icon-arrow-double-right" icon-next-page="vxe-icon-arrow-right"
          icon-jump-more="vxe-icon-ellipsis-h" :loading="loading" :current-page="1" :page-size="20" :total="100"
          :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Sizes', 'Total']" @page-change="handlePageChange">
        </vxe-pager>
      </a-tab-pane>
      <a-tab-pane key="相关设备" tab="相关设备">
        <vxe-table ref="xTable1" border stripe height="400"
          :checkbox-config="{ trigger: 'row', highlight: true, range: true }" :column-config="{ resizable: true }"
          :row-config="{ isHover: true }" :data="tableData"
          :custom-config="{ storage: true, checkMethod: checkColumnMethod }">
          <vxe-column type="checkbox" width="40"></vxe-column>
          <vxe-column type="seq" width="30"></vxe-column>
          <vxe-column field="设备" title="设备" sortable>
            <template #default="{ row }"><a href=#>{{ row.设备 ? row.设备 : "设备" }}</a></template>
          </vxe-column>
          <vxe-column field="工作中心" title="工作中心" sortable>
            <template #default="{ row }"><a href=#>{{ row.工作中心 ? row.工作中心 : "工作中心" }}</a></template>
          </vxe-column>
          <vxe-column field="工序" title="工序" sortable></vxe-column>
          <vxe-column field="日期" title="日期" sortable></vxe-column>
          <vxe-column field="班次" title="班次" sortable></vxe-column>
          <vxe-column field="开机时间" title="开机时间" sortable></vxe-column>
          <vxe-column field="关机时间" title="关机时间" sortable></vxe-column>
          <vxe-column field="开机点检报告" title="开机点检报告" sortable>
            <template #default>
              <a-button type="link">点击查看</a-button>
            </template>
          </vxe-column>
          <vxe-column field="巡检报告" title="巡检报告" sortable>
            <template #default>
              <a-button type="link">点击查看</a-button>
            </template>
          </vxe-column>
          <vxe-column field="关机点检报告" title="关机点检报告" sortable>
            <template #default>
              <a-button type="link">点击查看</a-button>
            </template>
          </vxe-column>
        </vxe-table>
        <vxe-pager border icon-prev-page="vxe-icon-arrow-left" icon-jump-prev="vxe-icon-arrow-double-left"
          icon-jump-next="vxe-icon-arrow-double-right" icon-next-page="vxe-icon-arrow-right"
          icon-jump-more="vxe-icon-ellipsis-h" :loading="loading" :current-page="1" :page-size="20" :total="100"
          :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Sizes', 'Total']" @page-change="handlePageChange">
        </vxe-pager>
      </a-tab-pane>
      <a-tab-pane key="相关工装" tab="相关工装">
        <vxe-table ref="xTable1" border stripe height="400"
          :checkbox-config="{ trigger: 'row', highlight: true, range: true }" :column-config="{ resizable: true }"
          :row-config="{ isHover: true }" :data="tableData"
          :custom-config="{ storage: true, checkMethod: checkColumnMethod }">
          <vxe-column type="checkbox" width="40"></vxe-column>
          <vxe-column type="seq" width="30"></vxe-column>
          <vxe-column field="工装" title="工装" sortable>
            <template #default="{ row }"><a href=#>{{ row.工装 ? row.设备 : "工装" }}</a></template>
          </vxe-column>
          <vxe-column field="工作中心" title="工作中心" sortable>
            <template #default="{ row }"><a href=#>{{ row.工作中心 ? row.工作中心 : "工作中心" }}</a></template>
          </vxe-column>
          <vxe-column field="工序" title="工序" sortable></vxe-column>
          <vxe-column field="日期" title="日期" sortable></vxe-column>
          <vxe-column field="班次" title="班次" sortable></vxe-column>
          <vxe-column field="上机时间" title="上机时间" sortable></vxe-column>
          <vxe-column field="下机时间" title="下机时间" sortable></vxe-column>
          <vxe-column field="上机点检报告" title="上机点检报告">
            <template #default>
              <a-button type="link">点击查看</a-button>
            </template>
          </vxe-column>
          <vxe-column field="巡检报告" title="巡检报告">
            <template #default>
              <a-button type="link">点击查看</a-button>
            </template>
          </vxe-column>
          <vxe-column field="上机点检报告" title="上机点检报告">
            <template #default>
              <a-button type="link">点击查看</a-button>
            </template>
          </vxe-column>
        </vxe-table>
        <vxe-pager border icon-prev-page="vxe-icon-arrow-left" icon-jump-prev="vxe-icon-arrow-double-left"
          icon-jump-next="vxe-icon-arrow-double-right" icon-next-page="vxe-icon-arrow-right"
          icon-jump-more="vxe-icon-ellipsis-h" :loading="loading" :current-page="1" :page-size="20" :total="100"
          :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Sizes', 'Total']" @page-change="handlePageChange">
        </vxe-pager>
      </a-tab-pane>
      <a-tab-pane key="相关物料" tab="相关物料">
        <vxe-table ref="xTable1" border stripe height="400"
          :checkbox-config="{ trigger: 'row', highlight: true, range: true }" :column-config="{ resizable: true }"
          :row-config="{ isHover: true }" :data="tableData"
          :custom-config="{ storage: true, checkMethod: checkColumnMethod }">
          <vxe-column type="checkbox" width="40"></vxe-column>
          <vxe-column type="seq" width="30"></vxe-column>
          <vxe-column field="物料" title="物料" sortable>
            <template #default="{ row }"><a href=#>{{ row.物料 ? row.物料 : "物料" }}</a></template>
          </vxe-column>
          <vxe-column field="批次" title="批次" sortable></vxe-column>
          <vxe-column field="数量" title="数量" sortable></vxe-column>
          <vxe-column field="操作时间" title="操作时间" sortable></vxe-column>
          <vxe-column field="操作人" title="操作人" sortable></vxe-column>
          <vxe-column field="操作" title="操作" fixed="right" width="100">
            <template #default>
              <a-button type="link">反向追溯</a-button>
            </template>
          </vxe-column>
        </vxe-table>
        <vxe-pager border icon-prev-page="vxe-icon-arrow-left" icon-jump-prev="vxe-icon-arrow-double-left"
          icon-jump-next="vxe-icon-arrow-double-right" icon-next-page="vxe-icon-arrow-right"
          icon-jump-more="vxe-icon-ellipsis-h" :loading="loading" :current-page="1" :page-size="20" :total="100"
          :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Sizes', 'Total']" @page-change="handlePageChange">
        </vxe-pager>
      </a-tab-pane>
      <a-tab-pane key="相关工艺" tab="相关工艺">
        <vxe-table ref="xTable1" border stripe height="400"
          :checkbox-config="{ trigger: 'row', highlight: true, range: true }" :column-config="{ resizable: true }"
          :row-config="{ isHover: true }" :data="tableData"
          :custom-config="{ storage: true, checkMethod: checkColumnMethod }">
          <vxe-column type="checkbox" width="40"></vxe-column>
          <vxe-column type="seq" width="30"></vxe-column>
          <vxe-column field="BOM快照" title="BOM快照" sortable>
            <template #default><a href="#">点击查看</a></template>
          </vxe-column>
          <vxe-column field="工艺路线快照" title="工艺路线快照" sortable>
            <template #default><a href="#">点击查看</a></template>
          </vxe-column>
          <vxe-column field="工艺点检" title="工艺点检" sortable>
            <template #default><a href="#">点击查看</a></template>
          </vxe-column>
          <vxe-column field="工艺巡检" title="工艺巡检" sortable>
            <template #default><a href="#">点击查看</a></template>
          </vxe-column>
        </vxe-table>
        <vxe-pager border icon-prev-page="vxe-icon-arrow-left" icon-jump-prev="vxe-icon-arrow-double-left"
          icon-jump-next="vxe-icon-arrow-double-right" icon-next-page="vxe-icon-arrow-right"
          icon-jump-more="vxe-icon-ellipsis-h" :loading="loading" :current-page="1" :page-size="20" :total="100"
          :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Sizes', 'Total']" @page-change="handlePageChange">
        </vxe-pager>
      </a-tab-pane>
      <a-tab-pane key="同批次产品" tab="同批次产品">
        <vxe-table ref="xTable1" border stripe height="400"
          :checkbox-config="{ trigger: 'row', highlight: true, range: true }" :column-config="{ resizable: true }"
          :row-config="{ isHover: true }" :data="tableData"
          :custom-config="{ storage: true, checkMethod: checkColumnMethod }">
          <vxe-column type="checkbox" width="40"></vxe-column>
          <vxe-column type="seq" width="30"></vxe-column>
          <vxe-column field="物料" title="物料" sortable>
            <template #default="{ row }"><a href=#>{{ row.物料 ? row.物料 : "物料" }}</a></template>
          </vxe-column>
          <vxe-column field="批次" title="批次" sortable></vxe-column>
          <vxe-column field="数量" title="数量" sortable></vxe-column>
          <vxe-column field="操作" title="操作" fixed="right" width="100">
            <template #default>
              <a-button type="link">正向追溯</a-button>
            </template>
          </vxe-column>
        </vxe-table>
        <vxe-pager border icon-prev-page="vxe-icon-arrow-left" icon-jump-prev="vxe-icon-arrow-double-left"
          icon-jump-next="vxe-icon-arrow-double-right" icon-next-page="vxe-icon-arrow-right"
          icon-jump-more="vxe-icon-ellipsis-h" :loading="loading" :current-page="1" :page-size="20" :total="100"
          :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Sizes', 'Total']" @page-change="handlePageChange">
        </vxe-pager>
      </a-tab-pane>
      <a-tab-pane key="物流信息" tab="物流信息">
        <vxe-table ref="xTable1" border stripe height="400"
          :checkbox-config="{ trigger: 'row', highlight: true, range: true }" :column-config="{ resizable: true }"
          :row-config="{ isHover: true }" :data="tableData"
          :custom-config="{ storage: true, checkMethod: checkColumnMethod }">
          <vxe-column type="checkbox" width="40"></vxe-column>
          <vxe-column type="seq" width="30"></vxe-column>
          <vxe-column field="物料" title="物料" sortable>
            <template #default="{ row }"><a href=#>{{ row.物料 ? row.物料 : "物料" }}</a></template>
          </vxe-column>
          <vxe-column field="批次" title="批次" sortable></vxe-column>
          <vxe-column field="数量" title="数量" sortable></vxe-column>
          <vxe-column field="出入库类型" title="出入库类型" sortable></vxe-column>
          <vxe-column field="操作时间" title="操作时间" sortable></vxe-column>
          <vxe-column field="操作人" title="操作人" sortable></vxe-column>
        </vxe-table>
        <vxe-pager border icon-prev-page="vxe-icon-arrow-left" icon-jump-prev="vxe-icon-arrow-double-left"
          icon-jump-next="vxe-icon-arrow-double-right" icon-next-page="vxe-icon-arrow-right"
          icon-jump-more="vxe-icon-ellipsis-h" :loading="loading" :current-page="1" :page-size="20" :total="100"
          :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Sizes', 'Total']" @page-change="handlePageChange">
        </vxe-pager>
      </a-tab-pane>
      <a-tab-pane key="质检报告" tab="质检报告">
        <vxe-table ref="xTable1" border stripe height="400"
          :checkbox-config="{ trigger: 'row', highlight: true, range: true }" :column-config="{ resizable: true }"
          :row-config="{ isHover: true }" :data="tableData"
          :custom-config="{ storage: true, checkMethod: checkColumnMethod }">
          <vxe-column type="checkbox" width="40"></vxe-column>
          <vxe-column type="seq" width="30"></vxe-column>
          <vxe-column field="质量类型" title="质量类型" sortable>
            <template #default="{ row }"><a href=#>{{ row.质量类型 ? row.质量类型 : "完工质检" }}</a></template>
          </vxe-column>
          <vxe-column field="结果" title="结果" sortable>
            <template #default="{ row }"><a-tag color="green">{{ row.结果 ? row.结果 : "合格" }}</a-tag></template>
          </vxe-column>
          <vxe-column field="质检报告" title="质检报告" sortable>
            <template #default>
              <a-button type="link">点击查看</a-button>
            </template>
          </vxe-column>
          <vxe-column field="操作时间" title="操作时间" sortable></vxe-column>
          <vxe-column field="操作人" title="操作人" sortable></vxe-column>
        </vxe-table>
        <vxe-pager border icon-prev-page="vxe-icon-arrow-left" icon-jump-prev="vxe-icon-arrow-double-left"
          icon-jump-next="vxe-icon-arrow-double-right" icon-next-page="vxe-icon-arrow-right"
          icon-jump-more="vxe-icon-ellipsis-h" :loading="loading" :current-page="1" :page-size="20" :total="100"
          :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Sizes', 'Total']" @page-change="handlePageChange">
        </vxe-pager>
      </a-tab-pane>
    </a-tabs>
  </a-card>
</template>

<script>
export default {
  name: 'Table',
  data() {
    return {
      loading: false,
      page: 1,
      pageSize: 10,
      total: 0,
      tableData: [
        {
          "日期": "2023-10-01",
          "类型": "休息",
          "备注": "",
        },
        {
          "日期": "2023-10-02",
          "类型": "加班",
          "备注": "",
        },
        {
          "日期": "2023-10-03",
          "类型": "工作日",
          "备注": "",
        },
        {
          "日期": "2023-10-04",
          "类型": "工作日",
          "备注": "",
        },
        {
          "日期": "2023-10-05",
          "类型": "工作日",
          "备注": "",
        },
      ]
    }
  },
  created() {
  },
  methods: {

  }
}
</script>

<style scoped lang="less"></style>